<template>
  <view class="container">
    <swiper class="swiper" :vertical="true" :indicator-dots="true" :autoplay="false">
      <swiper-item v-for="(card, index) in cards" :key="index">
        <uni-card :title="card.date" :extra="card.weekday" margin="5">

          <uni-row class="demo-uni-row" :width="nvueWidth">
		
            <uni-col class="demo-uni-col">
              <!-- <view class="demo-uni-col dark_deep"></view> -->
              <text class="uni-body large-font margin40">{{ card.result }}</text>
            </uni-col>
			
          </uni-row>
          <uni-row class="demo-uni-row" :width="nvueWidth">
            <uni-col class="demo-uni-col">
              <text class="uni-body margin25" >{{ card.stockName }} {{ card.stockCode }}</text>
            </uni-col>
          </uni-row>
        </uni-card>
        <uni-card :is-shadow="true" margin="5">
          <uni-row class="demo-uni-row" :width="nvueWidth">
            <uni-col :span="8" class="demo-uni-col">
              <text class="uni-body margin10" >计划方案</text>
            </uni-col>
            <uni-col :span="8" class="demo-uni-col">
              <text class="uni-body margin10" style="color: red;">买入 {{ card.buyPrice }}</text>
            </uni-col>
            <uni-col :span="8" class="demo-uni-col">
              <text class="uni-body margin10" style="color:limegreen;">卖出 {{ card.sellPrice }}</text>
            </uni-col>
          </uni-row>
        </uni-card>
        <uni-card :is-shadow="true" margin="5">
          <uni-row class="demo-uni-row" :width="nvueWidth" style="margin-bottom: 10px">
            <uni-col :span="12" class="left-align">
              <text class="uni-body">方案来源</text>
            </uni-col>
            <uni-col :span="12" class="right-align">
              <text class="uni-body oval-border" style="margin-left: 50%;">AI日选</text>
            </uni-col>
          </uni-row>
          <uni-row class="demo-uni-row" :width="nvueWidth">

          </uni-row>
          <uni-grid :column="2" :highlight="true" :square="false">
            <uni-grid-item>
              <view class="grid-item-box" style="background-color: #fff;">
                <!-- <uni-icons type="image" :size="30" color="#777" /> -->
                <text class="text">最高价</text>
                <text class="text" style="font-weight: bold;">{{card.high}}</text>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item-box" style="background-color: #fff;">
                <!-- <uni-icons type="image" :size="30" color="#777" /> -->
                <text class="text">最低价</text>
                <text class="text" style="font-weight: bold;">{{card.low}}</text>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item-box" style="background-color: #fff;">
                <!-- <uni-icons type="image" :size="30" color="#777" /> -->
                <text class="text">收盘价</text>
                <text class="text" style="font-weight: bold;">{{card.result}}</text>
              </view>
            </uni-grid-item>
            <uni-grid-item>
              <view class="grid-item-box" style="background-color: #fff;">
                <!-- <uni-icons type="image" :size="30" color="#777" /> -->
                <text class="text">交易量</text>
                <text class="text" style="font-weight: bold;">{{card.vol}}</text>
              </view>
            </uni-grid-item>
          </uni-grid>
        </uni-card>
      </swiper-item>
    </swiper>
  </view>
</template>


<script>
import {host} from "@/common/constants";

export default {
  components: {},
  data() {
    return {
      cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
      avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
      extraIcon: {
        color: '#4cd964',
        size: '22',
        type: 'gear-filled'
      },
      gutter: 0,
      nvueWidth: 730,
      cards: [
        // 更多卡片数据
      ]
    }
  },
  mounted() {
    console.log(2334)
    let that = this
    uni.request({
      url: host + "/api/stock/recommend",
      method: "GET",
      success: (data) => {
        console.log(data)
        let arr = data.data.data
        arr.map(item => {
          let recentClose = item.df.close.slice(-4)[0] // 获取最近的收盘价
		  let recentHigh = item.df.high.slice(-4)[0]
		  let recentLow = item.df.low.slice(-4)[0]
		  let recentAmount = item.df.vol.slice(-4)[0]
		  
          let lowArr = item.df.predict_low.slice(-3)
          let highArr = item.df.predict_high.slice(-3)
          let highest = highArr[0]
          let lowest = lowArr[0]
          for (let i = 0; i < 3; i++) {
            if (highArr[i] > highest) highest = highArr[i]
            if (lowArr[i] < lowest) lowest = lowArr[i]
          }
          that.cards.push({
            date: item.date,
            weekday: that.getWeekDay(item.date),
            stockCode: item.code,
            stockName: item.name,
            result: recentClose,
            buyPrice: lowest,
            sellPrice: highest,
            high: recentHigh,
			low: recentLow,
			vol: recentAmount
          })
        })

      },
      fail: (err) => {

      }
    })
  },
  methods: {
    onClick(e) {
      console.log(e)
    },
    actionsClick(text) {
      uni.showToast({
        title: text,
        icon: 'none'
      })
    },
    getWeekDay(dateString) {
      // 解析输入的日期字符串 20240505 这种格式
      let year = parseInt(dateString.substring(0, 4));
      let month = parseInt(dateString.substring(4, 6)) - 1; // 月份从0开始
      let day = parseInt(dateString.substring(6, 8));

      // 创建日期对象
      let date = new Date(year, month, day);

      // 获取星期几
      let dayOfWeek = date.getDay();

      // 定义星期几的名称
      // let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      let days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

      // 返回今天是星期几
      return days[dayOfWeek];
    }
  }
}
</script>

<style lang="scss">
// #ifdef MP
.margin10 {
	margin-left: 10%;
}
.margin25{
	margin-left: 25%;
}
.margin40{
	margin-left: 40%;
}
// #endif

.container {
  //display: flex;
  overflow: hidden;
  padding-left: 20px;
  padding-right: 20px;
  height: 100vh;
  background-color: gold;
  //justify-content: center;
  //align-items: center;
  //flex-direction: column;

  //border-radius: 15px;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.large-font {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}


.custom-cover {
  flex: 1;
  flex-direction: row;
  position: relative;
}

.cover-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background-color: rgba($color: #000000, $alpha: 0.4);
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 15px;
  font-size: 14px;
  color: #fff;
}

.card-actions {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 45px;
  border-top: 1px #eee solid;
}

.card-actions-item {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.card-actions-item-text {
  font-size: 12px;
  color: #666;
  margin-left: 5px;
}

.cover-image {
  flex: 1;
  height: 150px;
}

.no-border {
  border-width: 0;
}
</style>

<style lang="scss">
.demo-uni-row {
  //margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

// 支付宝小程序没有 demo-uni-row 层级
// 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级
/* #ifdef MP-ALIPAY || MP-WEIXIN */
::v-deep .uni-row {
  margin-bottom: 5px;
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* #endif */

.demo-uni-col {
  height: 36px;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.left-align {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.right-align {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.oval-border {
  padding: 3px 10px;
  border: 1px solid #23abe2;
  border-radius: 15px;
  text-align: center;
}

.dark_deep {
  background-color: #99a9bf;
}

.dark {
  background-color: #d3dce6;
}

.light {
  background-color: #e5e9f2;
}
.uni-body{
	
}

</style>

<style lang="scss">
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
  margin-top: 5px;
}


.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 5px 5px;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  // flex: 1;
  height: 430px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 10px;
  margin-top: 20%;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
</style>
